<template>
  <div
    class="full-height bg-white page-content content padding-20 add-stock-in"
  >
    <!-- 设备信息 -->
    <q-form
      greedy
      @reset="onClear"
      ref="myForm"
      class="dialog-content form-inline block no-padding full-height"
    >
      <div style="height: calc(100% - 43px)" class="scrollbar overflow-auto">
        <div class="row q-mb-md">
          <span class="q-mr-md plan-title">清单编号: {{ queryParams.name }} </span>
          <span class="q-mr-md plan-title">清单名称: {{ queryParams.number }} </span>
        </div>
        <card title="设备列表">
          <div class="page-content" style="max-height: 500px;width: 100%">
            <q-table
              :data="tableDataDev"
              :columns="columnDevice"
              row-key="id"
              class="scroll "
              :loading="isTableLoading"
              :pagination.sync="pagination"
              :hide-bottom="tableDataDev.length > 0"
              no-data-label="暂无数据"
              color="primary"
            >
              <template v-slot:body-cell-index="props">
                <q-td>
                  {{ props.row.__index + 1 }}
                </q-td>
              </template>
            </q-table>
          </div>
        </card>
        <card title="备件清单">
          <div class="page-content" style="max-height: 500px;width: 100%">
              <q-table
                :data="tableDataPart"
                :columns="columns"
                row-key="id"
                class="scroll"
                :loading="isTableLoading"
                :pagination.sync="pagination"
                :hide-bottom="tableDataPart.length > 0"
                no-data-label="暂无数据"
                color="primary"
              >
              <template v-slot:body-cell-index="props">
                  <q-td>
                  {{ props.row.__index + 1 }}
                </q-td>
              </template>
            </q-table>
          </div>
        </card>
          <div class="q-mt-md flex font-size-16">
            <div class="q-mr-md">备注: </div>
            <div class="flex-1 word-break">{{queryParams.remark | toHorizontalLine}}</div>
          </div>
      </div>
      <q-separator class="qa-line" />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn
          outline
          label="取消"
          color="primary"
          type="reset"
          class="q-mr-md"
        />
      </div>
    </q-form>
    <q-inner-loading :showing="isLoading" style="z-index: 99">
      <q-spinner-gears size="50px" color="primary" />
    </q-inner-loading>
  </div>
</template>

<script>
import STOCKBACKMIXIN from '../../inventory/stock-in/common/stock-back-mixin'
import Card from './card'
import { getDevicePartById } from '../../../boot/spare/parts'
export default {
  name: 'detail-parts-list',
  mixins: [STOCKBACKMIXIN],
  components: {
    Card
  },
  data () {
    return {
      isTableLoading: false,
      isShowSelectDialog: false,
      tableDataDev: [],
      tableDataPart: [],
      isLoading: false,
      queryParams: {
        name: '',
        number: '',
        remark: ''
      },
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'number', label: '备件编号', align: 'left', field: 'number' },
        { name: 'name', label: '备件名称', align: 'left', field: 'name' },
        {
          name: 'categoryName',
          label: '所属分类',
          align: 'left',
          field: 'categoryName'
        },
        { name: 'spec', label: '规格', align: 'left', field: 'spec' },
        { name: 'unitName', label: '单位', align: 'left', field: 'unitName' }
      ],
      columnDevice: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'assetNumber', label: '设备编号', align: 'left', field: 'assetNumber' },
        { name: 'name', label: '设备名称', align: 'left', field: 'name' },
        { name: 'deviceType', label: '设备类型', align: 'left', field: 'deviceType' },
        { name: 'model', label: '设备型号', align: 'left', field: 'model' },
        { name: 'workShopName', label: '所在车间', align: 'left', field: 'workShopName' }
      ]
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => { to.name === 'detailPartsList' && vm.getEditDetail() })
  },
  methods: {
    onReset () {
      this.goPathName('parts-list/detail', `partsList`, {})
    },
    onClear () {
      this.onReset()
    },
    // 格式化获取的数据
    setDetailData (val) {
      this.queryParams.name = val.name
      this.queryParams.number = val.number
      this.queryParams.remark = val.remark
      this.$set(this.queryParams, 'id', val.id)
      this.tableDataDev = val?.devices.map(v => {
        return {
          ...v,
          id: v.deviceId,
          model: v.deviceModel,
          name: v.deviceName,
          assetNumber: v.deviceNumber
          // workShopName: v.workShopName,
        }
      })
      this.tableDataPart = val?.spareParts.map(v => {
        return {
          ...v,
          id: v.sparePartId,
          name: v.sparePartName,
          number: v.sparePartNumber,
          categoryName: v.sparePartCategory,
          spec: v.sparePartSpec,
          unitName: v.sparePartUnit
        }
      })
    },
    getEditDetail () {
      if (!this.$route.query.id) return
      this.isLoading = true
      getDevicePartById(this.$route.query.id).then(res => {
        this.isLoading = false
        this.setDetailData(res.data)
      }).catch(err => {
        this.isLoading = false
        console.log(err)
      })
    }
  }
}
</script>

<style scoped></style>
